<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title></title>
	<link href="css/style.css" rel="stylesheet"/>
	<!--[if !IE]><!-->
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<!--<![endif]-->
	<!--[if lt IE 9]>
	<link rel="stylesheet" type="text/css"href="css/style-ie8.css" />
	<![endif]-->
	<link href="css/menu.css" rel="stylesheet"/>

	<link rel="SHORTCUT ICON" href="images/icon/logo-head.png"/>
	<script src="scripts/jquery-1.8.3.min.js"></script>
	<script src="scripts/main.js"></script>

</head>
<body>
<div class="main">
	<div class="header">
		<div class="header-container">
			<div class="header-menu">
				<ul class="menu-list">
					<li class="menu-item"><a href="#" id="menu-item1">Item 1</a></li>
					<li class="menu-item"><a href="#" id="menu-item2">Item 2</a></li>
					<li class="menu-item"><a href="#" id="menu-item3">Item 3</a></li>
					<li class="menu-item"><a href="#" id="menu-item4">Item 4</a></li>
				</ul>
			</div>
			<div class="header-logo">LOGO</div>
			<div class="header-log">
				<div class="btn-expand-login" id="expand-login-btn">Login</div>
			</div>
		</div>
	</div>
	<div class="cover">
		<div class="cover-container">
		</div>

	</div>
	<div class="page">
		<div class="page-container">
			<div class="page-cont-left">
				<div class="page-cont-title">
					<span class="cont-title-bold">Text</span><span class="cont-title-sub">Sub text</span>
				</div>
				<div class="page-cont-title-sub">
					<span class="cont-title-sub">Sub text</span>
					<i class="sub0"></i>
				</div>
				<ul class="user-list">
					<li class="user-item">
						<div class="user-item-rank">
							9,999
						</div>
						<div class="user-item-avatar-panel">
							<span class="user-avt" style="background-image: url('resources/avt/avt0.jpg')"></span>
						</div>
						<span class="user-item-name">Justin Nguyen</span>
						<div class="user-item-score">
							9,999
						</div>
						<div class="user-item-icon-panel">
							<img src="resources/img/png1.png"/>
						</div>

					</li>
					<li class="user-item">
						<div class="user-item-rank">
							9,888
						</div>
						<div class="user-item-avatar-panel">
							<span class="user-avt" style="background-image: url('resources/avt/avt1.jpg')"></span>
						</div>
						<span class="user-item-name">PECwijk</span>
						<div class="user-item-score">
							9,777
						</div>
						<div class="user-item-icon-panel">
							<img src="resources/img/png1.png"/>
						</div>

					</li>
					<li class="user-item">
						<div class="user-item-rank">
							9,888
						</div>
						<div class="user-item-avatar-panel">
							<span class="user-avt" style="background-image: url('resources/avt/avt2.jpg')"></span>
						</div>
						<span class="user-item-name">Daan</span>
						<div class="user-item-score">
							9,777
						</div>
						<div class="user-item-icon-panel">
							<img src="resources/img/png1.png"/>
						</div>

					</li>
					<li class="user-item">
						<div class="user-item-rank">
							9,888
						</div>
						<div class="user-item-avatar-panel">
							<span class="user-avt" style="background-image: url('resources/avt/avt3.jpg')"></span>
						</div>
						<span class="user-item-name">Hans</span>
						<div class="user-item-score">
							9,777
						</div>
						<div class="user-item-icon-panel">
							<img src="resources/img/png1.png"/>
						</div>

					</li>
					<li class="user-item">
						<div class="user-item-rank">
							9,888
						</div>
						<div class="user-item-avatar-panel">
							<span class="user-avt" style="background-image: url('resources/avt/avt4.jpg')"></span>
						</div>
						<span class="user-item-name">Somebody</span>
						<div class="user-item-score">
							9,777
						</div>
						<div class="user-item-icon-panel">
							<img src="resources/img/png1.png"/>
						</div>

					</li>
				</ul>
				<div class="page-cont-control">
					<div class="page-cont-button" id="page-cont-button-next"></div>
					<div class="page-cont-button" id="page-cont-button-prev"></div>
					<div class="page-cont-button-save" id="page-cont-button-save">Save</div>
				</div>
			</div>
			<div class="page-cont-right">
				<div class="page-cont-title light">
					<span class="cont-title-bold">Text</span>
				</div>
				<div class="page-cont-rate">
					<p class="page-cont-label">115,098 participants</p>

					<p class="page-cont-label">5,981,178 predictions</p>
				</div>
				<ul class="page-cont-tip-list">
					<li class="page-cont-tip-item">
						<div class="page-cont-tip-icon"><i class="tip-num">1</i></div>
						<div class="page-cont-tip-info">
							<div class="page-cont-tip-title">Enter your predictions</div>
							<div class="page-cont-tip-des">You will score points when you predict the correct winner, or
								the exact score of one or both teams
							</div>
						</div>
					</li>
					<li class="page-cont-tip-item">
						<div class="page-cont-tip-icon"><i class="tip-num">2</i></div>
						<div class="page-cont-tip-info">
							<div class="page-cont-tip-title">Enter your predictions</div>
							<div class="page-cont-tip-des">You will score points when you predict the correct winner, or
								the exact score of one or both teams
							</div>
						</div>
					</li>
					<li class="page-cont-tip-item">
						<div class="page-cont-tip-icon"><i class="tip-num">3</i></div>
						<div class="page-cont-tip-info">
							<div class="page-cont-tip-title">Enter your predictions</div>
							<div class="page-cont-tip-des">You will score points when you predict the correct winner, or
								the exact score of one or both teams
							</div>
						</div>
					</li>
				</ul>
				<div class="page-cont-ref"></div>
			</div>
			<div class="page-clear"></div>
		</div>

	</div>
	<div class="footer">
		<div class="footer-container">
			<div class="footer-menu">
				<ul class="nav-list">
					<li class="nav-item"><a href="#" id="nav-item1">Item 1</a></li>
					<li class="nav-item"><a href="#" id="nav-item2">Item 2</a></li>
					<li class="nav-item"><a href="#" id="nav-item3">Item 3</a></li>
					<li class="nav-item"><a href="#" id="nav-item4">Item 4</a></li>
				</ul>
			</div>
		</div>
	</div>
</div>
<div class="popup undisplayed" id="login-popup">
	<div class="popup-container">
		<div class="popup-form">
			<div class="page-cont-title">
				<span class="cont-title-bold">Login</span><span class="cont-title-sub">Sub text</span>
				<span class="popup-btn-close" id="popup-btn-login-close"></span>
			</div>
			<div class="page-cont-title-sub">
				<span class="cont-title-sub"></span>
				<i class="sub1"></i>
			</div>
			<div class="user-item-avatar-panel default">
				<span class="user-avt default"></span>

			</div>
			<div class="popup-mess-row"><i class="bullet"></i>
				<span> Log in with your email address or </span>
				<a class="popup-link" id="btn-expand-register">create an account.</a>
			</div>
			<div class="popup-input-row"><span>Email</span><input type="text"/></div>
			<div class="popup-input-row"><span>Password</span><input type="password"/></div>
			<div class="popup-btn-row">
				<a class="popup-btn-forgot" href="#"><i class="bullet red"></i><span> Forgot your password?</span></a>
				<a class="popup-btn-login" href="#">Login</a>
			</div>
			<span class="popup-error-mess"><i></i> Password is not correct!</span>
			<span class="loading-spin undisplayed"></span>
		</div>
		<div class="popup-bottom"></div>
	</div>
</div>

<div class="popup undisplayed" id="register-popup">
	<div class="popup-container">
		<div class="popup-form">
			<div class="page-cont-title">
				<span class="cont-title-bold">Register</span><span class="cont-title-sub">Sub text</span>
				<span class="popup-btn-close" id="popup-btn-register-close"></span>
			</div>
			<div class="page-cont-title-sub">
				<span class="cont-title-sub"></span>
				<i class="sub0"></i>
			</div>
			<span class="popup-error-mess"><i></i> Input is not correct!</span>
			<div class="popup-input-row"><span>Name</span><input type="text"/></div>
			<div class="popup-input-row"><span>Email</span><input type="text"/></div>
			<div class="popup-input-row"><span>Confirm</span><input type="text" placeholder="email"/></div>
			<div class="popup-input-row"><span>Password</span><input type="password"/></div>
			<div class="popup-input-row"><span>Confirm</span><input type="password" placeholder="password"/></div>
			<div class="popup-btn-row">
				<a class="popup-btn-login" id="btn-register" href="#">Register</a>
			</div>
			<span class="loading-spin undisplayed"></span>
		</div>
		<div class="popup-bottom"></div>
	</div>
</div>

</body>
</html>
